<template>
    <el-dialog :title="title" :visible="visible" width="70%" @close="handleClose" :close-on-click-modal="false">
        <!-- 搜索区域 -->
        <div class="search-container">
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="关键字">
                    <el-input v-model="searchForm.keyword" placeholder="请输入关键字" clearable @clear="handleSearch"
                        @keyup.enter.native="handleSearch"></el-input>
                </el-form-item>

                <el-form-item label="使用状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable @change="handleSearch">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <!-- <el-button @click="resetSearch">重置</el-button> -->
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格区域 -->
        <el-table :data="tableData" border stripe v-loading="loading" height="400px" style="width: 100%">
            <el-table-column prop="coupon_id" label="优惠券" width="80"></el-table-column>
            <el-table-column prop="userAvatar" label="用户头像">
                <template slot-scope="{ row }">
                    <el-image style="width: 80px; height: 80px" :src="row.userAvatar"
                        :preview-src-list="[row.userAvatar]">
                    </el-image>
                </template>

            </el-table-column>
            <el-table-column prop="userName" label="用户名称"></el-table-column>
            <el-table-column prop="userPhone" label="用户手机号"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="{ row }">
                    <el-tag :type="getStatusTagType(row)">
                        {{ getStatusText(row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="use_time" label="使用时间" width="180"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 50]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
                :total="total"></el-pagination>
        </div>

        <!-- 操作按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { IMG_URL } from '@/utils/utils';
import { couponUserList } from '../api';

export default {
    name: 'TableDialog',
    props: {
        title: {
            type: String,
            default: '数据列表'
        },
        visible: {
            type: Boolean,
            default: false
        },
        coupon_id: {
            type: String | Number,
            default: '',
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            loading: false,
            searchForm: {
                keyword: '',
                status: ''
            },
            statusOptions: [
                { value: '0', label: '未使用' },
                { value: '1', label: '已使用' },
                { value: '2', label: '已过期' }
            ],
            tableData: [],
            page: 1,
            page_size: 10,
            total: 0
        }
    },
    watch: {
        coupon_id() {
            this.fetchData()
        }
    },
    methods: {
        // 获取表格数据
        fetchData() {
            this.loading = true;
            const p = {
                page: this.page,
                page_size: this.page_size,
                ...this.searchForm,
                coupon_id: this.coupon_id,
            }
            console.log(p);

            couponUserList(p).then(res => {
                console.log('couponUserList', res);
                
                this.tableData = res.list.map(i => ({
                    ...i,
                    userName: i.user.nickname,
                    userAvatar: IMG_URL + i.user.avatar,
                    userPhone: i.user.phone || '暂无'
                }));
                this.total = res.total;
                console.log('rererer', this.total);

            }).catch(() => {

            }).finally(() => {
                this.loading = false
            })
        },

        // 搜索
        handleSearch() {
            this.page = 1
            this.fetchData()
        },

        // 分页大小改变
        handleSizeChange(val) {
            this.page_ize = val
            this.fetchData()
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.page = val
            this.fetchData()
        },

        // 关闭弹窗
        handleClose() {
            this.$emit('update:visible', false)
            this.$emit('close')
        },

        // 获取状态文本
        getStatusText(data) {
            if (data.use_time) {
                return '已使用'
            } else if (data.is_expired) {
                return '已过期'
            } else {
                return '未使用'
            }
        },

        // 获取状态标签类型
        getStatusTagType(data) {
            if (data.use_time) {
                return ''
            } else if (data.is_expired) {
                return 'info'
            } else {
                return 'success'
            }
        }
    }
}
</script>

<style scoped>
.search-container {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

.dialog-footer {
    text-align: right;
}

.el-table {
    margin-top: 20px;
}

.el-form-item {
    margin-bottom: 0;
}
</style>